<template>
  <div> 
    <p>{{ title }}页面</p>
    <el-form :model="SingerForm" :rules="rules" ref="SingerForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="歌手姓名" prop="name">
          <el-input v-model="SingerForm.name"></el-input>
      </el-form-item>

      <el-form-item label="歌手性别" prop="sex">
        <el-radio-group v-model="SingerForm.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
          <el-radio :label="2">组合</el-radio> 
        </el-radio-group>
      </el-form-item>

      <el-form-item label="标签" prop="title">
          <el-select v-model="value1" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>

      <el-form-item label="歌手地区" prop="location">
          <el-input v-model="SingerForm.location"></el-input>
      </el-form-item>
    
      <el-form-item label="生日" prop="birth">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="SingerForm.birth" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="歌手图片" prop="image">
        <UpLoadImg :action="action" :dialogImageUrl="SingerForm.image" @Sendimg="sendimg" ref="uploadimg" :fileList="fileList"></UpLoadImg>
      </el-form-item>

      <el-form-item label="歌手简介" prop="introduction">
          <WangEditor :introduction="SingerForm.introduction" @sendEditor="handlEditor" ref="wangedit"></WangEditor>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm('SingerFrom')">确定</el-button>
          <el-button @click="resetForm('SingerForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  
</template>

<script>
import UpLoadImg from '@/components/Background/UpLoadImg/uploadimg.vue'
import WangEditor from '@/components/WangEditor.vue'
import { mapState } from 'vuex';
  export default {
    components:{
        WangEditor,
        UpLoadImg
    },
    data() {
      return {
        action:this.$baseUrl+ '/files/SingerImgUpload',
        fileList:[],
        options: [],
        value1: [],
        SingerForm: {
          name: '',
          sex: '',
          birth: '',
          introduction:'',
          image:'',
          location:'',
          id:''
        },
        rules: {
          name: [
            { required: true, message: '请输入歌手姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          birth: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
        }
      };
    },
    computed:{
      ...mapState('editfo',['title','baseDate'])
    },
    methods: {
      async getBiaoqian(){
        const res = await this.$axios.get("tag/SelectAll")
        if(res.code == "200"){
          this.options = res.data
        }
      },
      async SelectTag(){
        const res = await this.$axios.post(`tagMap/SelectTag?targetId=${this.SingerForm.id}&targetType=1`)
        this.value1 = res
      },
      async SelectSinger(){
        const res = await this.$axios.post(`Singer/SelectIsExist?name=${this.SingerForm.name}&sex=${this.SingerForm.sex}`)
        console.log(res)
        return res
      },

      async updateTag(){
        const res = await this.$axios.post(`tagMap/UpdateTagMap?targetType=1&tagId=${this.value1}&targetId=${this.SingerForm.id}`)
        return res
      },
      async addTags(){
        let res = await this.SelectSinger()
        console.log(res.id)
        const ase = await this.$axios.post(`tagMap/AddTagMap?targetType=1&targetId=${res.id}&tagId=${this.value1}`)
        console.log(ase)
      },
      async submitForm() {
        if(this.title=='添加'){
          const res = await this.$axios.post("Singer/AddSinger",this.SingerForm)
          if(res.code=="200"){
            this.addTags()
            this.$message.success(res.msg)
            this.$router.push("/singer")
          }
          else{
            this.$message.error(res.msg)
          }
        }
        else{
          const ase = await this.$axios.put('Singer/UpdateSinger',this.SingerForm)
          console.log(ase)
          this.updateTag()
          this.$router.push("/singer")
          this.$message.success(ase.msg)
        }
      },
      handlEditor(val){
        this.SingerForm.introduction = val.replace(/<[^>]+>/g,"\n")
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      sendimg(val){
        this.SingerForm.image = val
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs.uploadimg.clear()
        this.$refs.wangedit.editor.clear()
      }
    },
    created(){
      this.getBiaoqian()
      if(this.title=="编辑"){
        this.SingerForm=this.baseDate
        this.SelectTag()
        this.fileList.push({name:'',url:this.SingerForm.image})
        this.$nextTick(()=>{
          this.$refs.wangedit.html=this.SingerForm.introduction
        })
      }
    }
  }
</script>